<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="width=device-width"/>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<head th:include="include :: header"><!--<title>扫码发货</title>--></head>
<link th:href="@{/css/plugins/dropzone/basic.css}" rel="stylesheet"/>
<link th:href="@{/css/plugins/dropzone/dropzone.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">
<style>

</style>
<body class="white-bg">
<div class="ibox-content">
    <form action="" method="post" class="form-horizontal m" id="batchPrint" >
        <input id="id" name="id"   type="hidden">
        <div class="form-horizontal m">

            <div class="form-group">
                <div class="">
                    <button type="submit" class="btn btn-primary" data-loading-text="Loading..." style="margin-left: 15px">print</button><!--  onclick="upload()" -->
                    <button onclick="$.modal.close()" class="btn btn-danger" type="button">close</button>
                </div>
            </div>

            <hr>

            <div id="batchPrint_div" >
                <div  th:each="orderDetail,iterStat:${ordersDetails}" style="text-align: center;background-color: #dcdcdc">
                    <h3 class="orderId" style="padding-top: 10px">OrderId:<font th:text="${orderDetail.orderID}"></font></h3>
                    <div class="makeCenter_facediv" style="width: 100%"></div>
                    <img th:src="${orderDetail.SurfaceBillUrl}" style="width: 80%">
                    <hr>
                    <div style='page-break-after:always;'></div>
                    <!--<div class="makeCenter_senddiv" style="width: 100%"></div>-->
                    <img th:src="${orderDetail.SendBillUrl}" style="width: 80%">
                    <!--<div th:class="${iterStat.index}+'location'"  ></div>-->
                    <div th:if="${!#lists.isEmpty(locations[orderDetail.unitSKUs])}">
                        The goods are available at the following address:<span th:text="${locations[orderDetail.unitSKUs]}"></span>
                    </div>
                    <div th:if="${#lists.isEmpty(locations[orderDetail.unitSKUs])}">
                        The goods are out of stock in the warehouse！
                    </div>
                    <div style="height: 20px;width: 100%;background-color: white"></div>
                    <div style='page-break-after:always;'></div>
                </div>
            </div>
        </div>
    </form>

</div>

<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/jquery-migrate/jQuery.print.min.js}"></script>
<script th:src="@{/js/plugins/dropzone/dropzone.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var getSelectRows = [[${ordersDetails}]];//打印的单据对象集合
    var locations =[[${locations}]];//货物地址集合


    $("#batchPrint").validate({
        submitHandler: function(form) {
            $(".makeCenter_facediv").css("height",'100px');
            $(".makeCenter_senddiv").css("height",'80px');
            $("hr").css("display","none");
            $(".orderId").css("display","none");


            var skus = [];//skus数组
            var ids = [];//选中行的id数组
            //获取选中行的sku数组
            for (var i = 0;i<getSelectRows.length;i++){
                skus.push(getSelectRows[i].unitSKUs);
                ids.push(getSelectRows[i].id);
            }

            var batchPrint_div = $("#batchPrint_div");//需要打印的jquery元素
            //获取选中行

            //循环拼接发货单面单，面单拼接货物位置
            for (var i =0;i<getSelectRows.length;i++){
                ids.push(getSelectRows[i].id);//获取选中行的id
                /* if(getSelectRows[i].sendBillUrl==null||getSelectRows[i].surfaceBillUrl==null){
                 $.modal.alertWarning("选中的单据中有未上传的面单或发货单！");
                 batchPrint_div.html("<img src='' class='img-responsive' id=\"batchPrintFaceBill\" />" +
                     "<div style='page-break-after:always;'></div>\n" +
                     "<img src='' class='img-responsive' id='batchPrintBill' />\n");
                 return false;
             }*/

                //货物不存在
                if (locations[skus[i]]==undefined||locations[skus[i]]==""){
                    locations[skus[i]]="The goods of this sku do not exist on the shelf";
                }

                $(i+"location").text(locations[skus[i]]);

            }

            //jquery打印方法
            batchPrint_div.print({
                //是否读取页面的样式
                globalStyles: true,
                //添加与attrbute media=打印的链接。
                mediaPrint: false,
                //在隐藏的iframe中打印。
                iframe: true,
                //不打印 的内容（选择器）
                noPrintSelector: ".avoid-this",
                //在打印的html之前添加内容
                // prepend: "Hello World!!!<br/>",
                //在打印的html之后添加内容,这里添加的直接可以是jquery元素
                // append:aa.html(),
                //在window.print()调用后resolve一个jQuery.Deferred对象
                deferred: $.Deferred().done(function (data) {
                    $.ajax({
                        url:ctx+'/module/ordersDetail/batchUpdateByPrint',
                        dataType:'json',
                        type:'post',
                        data:{
                            ids:ids,
                            sign:"print",
                        },
                        success:function (data) {
                            // $.table.refresh();
                            //parent.location.reload();
                        },
                        complete: function(XMLHttpRequest, textStatus) {
                        }
                    });
                })
            });

        }
    });



</script>
</body>
</html>